<ng-template #template>
  <div (pointerdown)="adorner.onPointerDown($event)" [class]="adorner.getRootCss()"
    [attr.data-sv-drop-target-item-value]="adorner.isDraggable ? this.item.value : null" #container
    (dragstart)="preventDragHandler($event)" (dragenter)="adorner.onDragEnter($event)"
    (dragover)="adorner.onDragOver($event)" (dragleave)="adorner.onDragLeave($event)" (drop)="adorner.onDrop($event)">
    <div class="svc-image-item-value-wrapper__ghost" [style]="getNewItemStyle()"></div>

    <div class="svc-image-item-value-wrapper__content">
      <input type="file" aria-hidden="true" tabindex="-1" [accept]="adorner.acceptedTypes"
        class="svc-choose-file-input" />

      <ng-container *ngIf="!adorner.isNew && !adorner.isUploading">
        <div *ngIf="!adorner.isNew" class="svc-image-item-value__item">
          <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
        </div>
        <span *ngIf="adorner.isDraggable && adorner.canRenderControls"
          class="svc-context-button svc-image-item-value-controls__drag-area-indicator"
          (pointerdown)="adorner.onPointerDown($event)" [attr.title]="undefined" [attr.aria-label]="undefined">
          <svg [iconName]="'icon-drag-24x24'" [size]="'auto'" sv-ng-svg-icon></svg>
        </span>
        <div *ngIf="adorner.canRenderControls" class="svc-context-container svc-image-item-value-controls">
          <ng-container *ngIf="adorner.allowRemove && !adorner.isUploading">
            <span class="svc-context-button" (click)="adorner.chooseFile(adorner)" [key2click] [attr.title]="undefined"
              [attr.aria-label]="undefined">
              <svg role="button" [iconName]="'icon-choosefile'" [size]="'auto'" [title]="adorner.selectFileTitle"
                sv-ng-svg-icon></svg>
            </span>
            <span class="svc-context-button svc-context-button--danger" (click)="adorner.remove(adorner)" [key2click]
              [attr.title]="undefined" [attr.aria-label]="undefined">
              <svg role="button" [iconName]="'icon-delete'" [size]="'auto'" [title]="adorner.removeFileTitle"
                sv-ng-svg-icon></svg>
            </span>
          </ng-container>
        </div>
      </ng-container>

      <ng-container *ngIf="adorner.isNew || adorner.isUploading">
        <div class="svc-image-item-value__item">
          <div class="sd-imagepicker__item sd-imagepicker__item--inline">
            <label class="sd-imagepicker__label">
              <div [style]="getNewItemStyle()" class="sd-imagepicker__image">
                <div class="svc-image-item-value__loading" *ngIf="adorner.isUploading">
                  <sv-ng-loading-indicator></sv-ng-loading-indicator>
                </div>
              </div>
            </label>
          </div>
        </div>
        <div class="svc-image-item-value-controls" *ngIf="adorner.allowAdd && !adorner.isUploading">
          <span class="svc-image-item-value__placeholder"
            *ngIf="adorner.showPlaceholder">{{adorner.placeholderText}}</span>
          <span [class]="adorner.addButtonCss" (click)="adorner.chooseNewFile(adorner)" [key2click]="{}">
            <svg [iconName]="'icon-add-lg'" [size]="'auto'" [title]="adorner.addFileTitle"
              *ngIf="adorner.showChooseButtonAsIcon" sv-ng-svg-icon></svg>
            <span *ngIf="!adorner.showChooseButtonAsIcon">{{adorner.chooseImageText}}</span>
          </span>
        </div>
      </ng-container>
    </div>
  </div>
</ng-template>